<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import myAxios from "@/plugins/myAxios";
import {Message} from "@arco-design/web-vue";



const columns = [{
  title: '房间型号',
  dataIndex: 'name',
}, {
  title: '大小',
  dataIndex: 'size',
  render: ({ record }) => {
    return `${record.size}平方米`;
  }
}, {
  title: '数量',
  dataIndex: 'quantity',
  render: ({ record }) => {
    return `${record.quantity}间`;
  }
}, {
  title: '日均价',
  dataIndex: 'price',
  render: ({ record }) => {
    return `￥${record.price}`;
  }
}, {
  title: '操作',
  slotName: 'optional'
}];
const data = ref([]);
//获取所有房间类型的信息
onMounted(async () => {
  const roomTypeList = await myAxios.get('/menu/list');
  console.log(roomTypeList.data.data);
  data.value = roomTypeList.data.data;
  console.log("data:{}",data.value)
})

const router = useRouter();
const form = reactive({
  name: '',
  identity: '',
  phone:'',
  startTime:'',
  endTime:'',
  //房间型号
  typeId:'',
  //住房花费
  price:'',
  count:'',
  password:''
});
const visible = ref(false);
const roleVisible = ref(false);
//点击预定按钮事件
const handleClick = (record) => {
  form.typeId = record.id;
  form.price = record.price;
  form.count = record.count;
  console.log("typeId:",record.id)
  visible.value = true;
}
//点击对话框的"确定键"
const handleBeforeOk = async () => {
  const res = await myAxios.post('/menu/book/room',{
    typeId: form.typeId,
    name: form.name,
    phone: form.phone,
    identity: form.identity,
    startTime: form.startTime,
    endTime: form.endTime,
    price: form.price,
    count: form.count
  });
  if (res){
    Message.success("操作成功");
    localStorage.setItem("identity",form.identity);
    localStorage.setItem("typeId",form.typeId);
    await router.push({
      path: '/menu/info',
      replace: true ,
      query:{
        identity:form.identity,
        typeId:form.typeId
      },
    })
  }else {
    Message.error("操作失败");
  }
  visible.value = false;
};
//点击对话框的"取消键"
const handleCancel = () => {
  visible.value = false;
}

//时间选择功能

//开始时间(给form赋值)
function onChangeStart(startValue) {
  console.log('onChange-startValue:',startValue);
  form.startTime = startValue
  console.log("startTime",form.startTime)
}
//结束时间(给form赋值)
function onChangeEnd(endValue) {
  console.log('onChange-endValue:',endValue);
  form.endTime = endValue;
  console.log("endTime",form.endTime)
}
//切换角色
const changeRole = async () => {
  roleVisible.value = true
}
const changeRoleOk = async () =>{
  const res = await myAxios.post('/admin/login',{
    name: form.name,
    password: form.password,
    phone: form.phone
  })
  if (res){
    await router.push('/menu/room')
    Message.success('登陆成功')
  }else{
    Message.error('密码或电话错误')
  }
}

</script>

<template>
  <div style="background-color: rgba(225,221,221,0.92)">
    <a-layout style="height: 100vh" >
      <a-layout-header style="height: 10vh;background-color: white">
        <div style="height: 100%;display: flex; align-items: center">
          <icon-robot-add style="font-size: 35px;height: 100%"/>
          <span style="margin-left: 8px;font-size: 24px;font-style:normal">智选优居</span>
<!--          <a-avatar style="margin-left: auto" :style="{ backgroundColor: '#14a9f8' }" @click="changeRole">点击切换</a-avatar>-->
          <a-avatar trigger-type="mask" style="margin-left: auto;margin-right: 20px" @click="changeRole" :style="{ backgroundColor: '#14C9C9' }">
            <IconUser />
            <template #trigger-icon>
              <IconEdit />
            </template>
          </a-avatar>
          <a-modal v-model:visible="roleVisible" title="身份切换" @cancel="handleCancel" @ok="changeRoleOk">
            <a-form :model="form">
              <a-form-item field="name" label="姓名">
                <a-input v-model="form.name" />
              </a-form-item>
              <a-form-item field="post" label="电话号">
                <a-input v-model="form.phone" />
              </a-form-item>
              <a-form-item field="post" label="密码">
                <a-input v-model="form.password" />
              </a-form-item>
            </a-form>
          </a-modal>
        </div>

      </a-layout-header>
      <a-layout style="margin-top: 15px">
        <a-layout-content>
          <a-table :columns="columns" :data="data" style="font-style: normal;font-size: 30px">
            <template #optional="{ record }">
              <a-button type="primary" shape="round" @click="handleClick(record)">预定</a-button>
              <a-modal v-model:visible="visible" title="房间预定" @cancel="handleCancel" @before-ok="handleBeforeOk">
                <a-form :model="form">
                  <a-form-item field="name" label="姓名">
                    <a-input v-model="form.name" />
                  </a-form-item>
                  <a-form-item field="post" label="身份证号">
                    <a-input v-model="form.identity" />
                  </a-form-item>
                  <a-form-item field="post" label="电话号">
                    <a-input v-model="form.phone" />
                  </a-form-item>
                  <a-form-item field="startTime" label="起始时间">
                    <a-date-picker
                        style="width: 220px;"
                        v-model="form.startTime"
                        @change="onChangeStart"
                    />
                  </a-form-item>
                  <a-form-item field="enTime" label="结束时间">
                    <a-date-picker
                        style="width: 220px;"
                        v-model="form.endTime"
                        @change="onChangeEnd"
                    />
                  </a-form-item>
                </a-form>
              </a-modal>
            </template>
          </a-table>
        </a-layout-content>
      </a-layout>
      <a-layout-footer style="height: 10vh;background-color: white;margin-top: 15px">Footer</a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>
icon-robot-add {
  transform: scale(1.5);
}
</style>